<template>
  <div>
    <!-- 列表展示 -->
    <el-table style="width: 100%" :data="list" v-loading="loading"  
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading">
      <el-table-column label="角色名称" prop="name" align="center"></el-table-column>
      <el-table-column label="角色状态" prop="enable" align="center">
        <template v-slot="props">
          {{props.row.enable==1?'启用':'禁用'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="props">
          <el-button type="warning" @click="open('update',props.row)">修改</el-button>
          <el-button type="danger" @click="del(props.row._id)">删除</el-button>
          <el-button type="success" @click="auth(props.row._id)">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog width="70%" title="权限分配" :visible.sync="dialogFormVisible">
      <el-form>
        <el-checkbox-group v-model="checkedList">
          <!-- 遍历一级菜单 -->
          <div v-for="v in functions" :key="v._id">
            <el-checkbox class="level1" :label="v._id">{{v.name}}</el-checkbox>：
            <br/>
            <!-- 遍历二级菜单 -->
            <el-checkbox class="level2" v-for="vv in v.children" :key="vv._id"
                :label="vv._id">{{vv.name}}</el-checkbox>
            <el-divider></el-divider>
          </div>

        </el-checkbox-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirmFunction">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changePage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {functionList} from 'api/functions.js'
import {findRoleList,findFunctionsByRoleId} from 'api/role.js'
import to from 'await-to-js'
export default {
  data(){
    return {
      loading:true,
      btnLoading:false,
      list:[],
      total:0,
      pageSize:5,
      currentPage:1,
      dialogFormVisible:false,
      checkedList:[],             //当前角色包含的那些菜单列表
      functions:[],               //所有的菜单列表
    }
  },
  mounted(){
    this.find();
  },
  methods:{
    changePage(num){
      this.currentPage=num;
      this.find();
    },
    open(){},
    del(){},
    async auth(_id){
      this.dialogFormVisible=true;
      //当打开授权提示框的时候：
      //1.查询所有菜单，列出来
      let [err,res] = await to(functionList())
      if(res){
        //2.对菜单数据进行分组：把二级菜单放到一级菜单的对象里面
        let menu1=[];//放一级菜单
        let menu2=[];//放二级菜单
        res.data.forEach(m=>{
          if(m.parentId==0){
            menu1.push(m);
          }else{
            menu2.push(m);
          }
        })
        //遍历二级菜单
        menu2.forEach(m=>{
          //找到当前二级菜单对应的一级菜单对象
          let level1 = menu1.find(s=>s._id==m.parentId)
          //如果找到了自己的父菜单，就将自己添加到父菜单的children数组中
          if(level1){
            if(level1.children){
              level1.children.push(m);  //如果children存在,则push
            }else{
              level1['children'] = [m];//如果children不存在,则初始化一个
            }
          }
        })
        this.functions = menu1;
        //3.查询当前这个角色对应的菜单，在对应菜单列表中打钩
        let [,res2] = await to(findFunctionsByRoleId(_id))
        this.checkedList = res2.data.map(item=>item._id);
      }else{
        this.$message.error(err);
      }
    },
    closeDialog(){
      this.dialogFormVisible=false;
    },
    confirmFunction(){},
    async find(){
      let params = {pageSize:this.pageSize,pageNo:this.currentPage}
      let [err,res] = await to(findRoleList(params))
      if(res){
        this.list = res.roleList;
        this.total = res.total;
      }else{
        this.$message.error(err)
      }
      this.loading=false;
    }
  }
}
</script>

<style scoped>
.level1{
  font-size:25px!important;
  font-weight:bold;
}
.level2{
  min-width:100px!important;
}
.el-divider--horizontal{
  margin:5px auto;
}
</style>